<template>
  <div class="project-box">
    <el-card style="margin: 20px">
      <img style="width: 200px; height: 200px" :src="image_url || localImage" />
      <div style="padding: 14px">
        <span style="font-size:18px;line-height:24px">{{ projectdata.product_name || "商品名称" }}</span>
        <div class="bottom clearfix">
          <div class="description" :title="projectdata.product_description">
            {{
            projectdata.product_description |textFormat
            }}
          </div>
        </div>
        <div class="bottom-info">
          <span class="price">{{ projectdata.price || 0 }}元</span>

          <el-button type="text" class="button" @click="gotoDetail">详情</el-button>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "ProjectBox",
  components: {},
  props: {
    projectdata: {
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      image_url: "",
      localImage: require("@/assets/empty.png"),
    };
  },
  filters: {
    textFormat(value) {
      return value.length > 10 ? value.substring(0, 8) + "..." : value;
    },
  },
  watch: {
    projectdata() {
      this.image_url =
        JSON.parse(this.projectdata.pictures)[0] || this.localImage;
    },
  },
  computed: {},
  created() {},
  mounted() {
    console.log(this.projectdata);
    this.image_url =
      JSON.parse(this.projectdata.pictures)[0] || this.localImage;
  },
  methods: {
    gotoDetail() {
      this.$emit("gotoDetail", this.projectdata);
    },
  },
};
</script>
<style lang="scss" scoped>
.project-box {
  .bottom-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .price {
    color: #ff0000;
  }
  .description {
    color: #666;
  }
}
</style>
